<script lang="ts" setup>
import { formatNumber } from '@/home/utils/format'
import Platform from '@/common/components/platform-avatar/index.vue'
import Tag from '@/home/components/Tag.vue';

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<template>
  <div class="page-home-recommend-organization rounded-4 bg-hex-fff p-20">
    <div class="mb-6 w-780px flex items-center whitespace-nowrap">
      <div class="mr-8 h-22 flex-shrink-0 rounded-2 bg-hex-E8F4FF px-6 text-center text-12 color-hex-345DE2 font-400 leading-22" v-if="props.data.isSelected">{{ $t('home.common.prime') }}</div>
      <a :href="props.data.jump" target="_blank" class="flex flex-1 items-center overflow-hidden">
        <h3 class="organization-title cursor-pointer truncate text-16 color-hex-292929 font-500 leading-22" :title="props.data.name">{{ props.data.name }}</h3>
        <Platform class="ml-4 shrink-0" :platform="props.data.platform" icon-class="size-16" tooltip />
      </a>
    </div>

    <p class="line-clamp-2 mb-10 break-anywhere text-14px color-hex-575757 font-400 leading-22" :title="props.data.description">
      {{ props.data.description ? props.data.description : $t('home.home.recommend.organization.empty') }}
    </p>

    <div class="flex justify-between">
      <div class="flex">
        <div class="mr-20 flex-y-center text-12 color-hex-8b8b8b font-400">
          <div class="i-icons:repository mr-4 size-16"></div>
          <div class="h-16">{{ formatNumber(props.data.projectNum) }}</div>
        </div>
        <div class="mr-20 flex-y-center text-12 color-hex-8b8b8b font-400">
          <div class="i-icons:member mr-4 size-16"></div>
          <div class="h-16">{{ formatNumber(props.data.memberNum) }}</div>
        </div>
        <div v-if="props.data.link" class="flex-y-center text-12 color-hex-8b8b8b font-400">
          <div class="i-icons:link mr-4 size-16"></div>
          <div class="h-16">{{ props.data.link }}</div>
        </div>
      </div>

      <div class="flex">
        <Tag
          v-for="item in props.data.tags"
          :key="item.labelId"
          :id="item.labelId"
          :name="item.labelName"
          class="mr-10 block h-22 w-auto cursor-pointer rounded-11 bg-hex-f7f7f7 px-8 py-3 text-center text-12 color-hex-8b8b8b font-400 leading-16 hover:bg-hex-e8e8e8"
          blank
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-home-recommend-organization {
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);

  &:hover {
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
  }

  &:hover .organization-title {
    color: #345de2;
  }
}
</style>
